<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: 'verify' }">总览</el-breadcrumb-item>
      <el-breadcrumb-item>员工</el-breadcrumb-item>
      <el-breadcrumb-item>在职员工</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-button
        class="filter-item"
        style="float: right"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
        >新员工入职</el-button
      >
      <el-table
        ref="multipleTable"
        :data="list"
        :stripe="true"
        style="width: 100%"
      >
        <el-table-column
          prop="uid"
          label="序号"
          width="auto"
          align="center"
          :resizable="false"
          type="index"
          :index="indexMethod"
        >
        </el-table-column>

        <el-table-column
          prop="workid"
          label="工号"
          width="auto"
          align="center"
          :resizable="false"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.snumber }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="name"
          label="姓名"
          width="auto"
          align="center"
          :resizable="false"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.sname }}</span>
          </template>
        </el-table-column>
        
        <el-table-column
          prop="username"
          label="性别"
          width="auto"
          align="center"
          :resizable="false"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.ssex | genderFilter }}</span>
          </template>
        </el-table-column>
        <!-- 职务 -->
        <el-table-column
          prop="job"
          label="职务"
          width="auto"
          align="center"
          :resizable="false"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.sduty }}</span>
          </template>
        </el-table-column>

        <!-- 公司 -->
        <el-table-column
          prop="username"
          label="公司"
          width="auto"
          align="center"
          :resizable="false"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.dname }}</span>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column
          fixed="right"
          label="操作"
          width="auto"
          align="center"
          :resizable="false"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              circle
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
            ></el-button>
            <el-button
              size="mini"
              type="danger"
              circle
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @current-change="currentChangeHandle"
        :current-page.sync="currentpage"
        :page-size="10"
        layout="total, prev, pager, next, jumper"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
      >
      </el-pagination>
    </div>
    <el-dialog :visible.sync="dialogFormVisible">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="70px"
        style="width: 400px; margin-left: 50px"
      >
        <el-form-item label="工号" prop="snumber">
          <el-input v-model="temp.snumber" />
        </el-form-item>

        <el-form-item label="姓名" prop="sname">
          <el-input v-model="temp.sname" />
        </el-form-item>

        <el-form-item label="性别" prop="ssex">
          <el-radio-group
            v-model="temp.ssex"
            style="float: left; margin-top: 10px"
          >
            <el-radio label="M">男</el-radio>
            <el-radio label="F">女</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="学历" prop="sedu">
          <el-select v-model="temp.sedu" style="float: left">
            <el-option
              v-for="item in eduOptions"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="职务" prop="sduty">
          <el-input v-model="temp.sduty" />
        </el-form-item>

        <el-form-item label="公司" prop="sdep">
          <el-select v-model="temp.sdep" style="float: left">
            <el-option
              v-for="item in deps"
              :key="item.did"
              :label="item.dname"
              :value="item.did"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="temp.stel" />
        </el-form-item>
        <el-form-item label="籍贯">
          <el-input v-model="temp.snaplace" />
        </el-form-item>
        <el-form-item label="住址">
          <el-input v-model="temp.sadd" />
        </el-form-item>
        <el-form-item label="生日" prop="sbirth">
          <el-date-picker
            v-model="temp.sbirth"
            type="date"
            placeholder="Please pick a date"
            style="float: left"
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="temp.sremark"
            :autosize="{ minRows: 2, maxRows: 4 }"
            type="textarea"
            style="float: left"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="dialogStatus === 'create' ? createData() : updateData()"
          >确认</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  filters: {
    genderFilter(gender) {
      const genderMap = {
        F: "女",
        M: "男",
      };
      return genderMap[gender];
    },
  },
  data() {
    return {
      deps: [],
      eduOptions: ["高中", "专科", "本科", "硕士", "博士"],
      listQuery: {
        page: 1,
        limit: 10,
      },

      temp: {},
      dialogFormVisible: false,
      dialogStatus: "",
      rules: {
        snumber: [{ required: true, message: "工号为必填项", trigger: "blur" }],
        sname: [{ required: true, message: "姓名为必填项", trigger: "blur" }],
        ssex: [{ required: true, message: "性别为必选项", trigger: "blur" }],
      },

      list: null,
      staffs: null,
      listLoading: true,
      delete: [],
      total: null,
      multipleSelection: [],
    };
  },
  created() {
    this.refreashInfo();
    this.getDeps();
  },
  methods: {
    getDeps() {
      this.$axios({
        method: "get",
        url: "/api/dep",
        params: this.listQuery,
      }).then((response) => {
        this.deps = response.data.data;
      });
    },

    refreashInfo() {
      this.getList();
    },
    currentChangeHandle(val) {
      this.listQuery.page = val; // 改变默认的页数
      this.getList(); // 切换页码时，要获取每页显示的条数
      console.log(`当前页: ${val}`);
    },
    getList() {
      const that = this;
      this.listLoading = true;

      this.$axios({
        method: "get",
        url: "/api/staff",
        params: this.listQuery,
      }).then(function (res) {
        that.list = res.data.data;
        that.total = res.data.total;
        that.listLoading = false;
        console.log(that.list)
      });
    },
    resetTemp() {
      this.temp = {
        sid: null,
        sdep: null,
        snaplace: null,
        sname: null,
        snumber: null,
        stel: null,
        stitle: 2,
        sadd: null,
        ssex: null,
        sbirth: null,
        sedu: null,
        sremark: null,
        sduty: null,
      };
    },
    handleCreate() {
      //创建
      this.resetTemp();
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },

    handleDelete(row) {
      //删除
      const that = this;
      this.$confirm("确定删除此用户?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$axios({
          method: "delete",
          url: "/api/staff/" + row.sid,
        })
          .then(function () {
            that.refreashInfo();
            that.$message({
              type: "success",
              message: "办理离职成功",
            });
          })
          .catch(() => {
            that.$message({
              type: "error",
              message: "办理离职失败",
            });
            this.dialogFormVisible = false;
          });
      });
    },
    //详细信息查看
    handleUpdate(row) {
      this.temp = Object.assign({}, row); // copy obj
      this.dialogStatus = "update";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    //详细信息更新
    updateData() {
      const that = this;
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp);
          this.$axios({
            method: "put",
            url: "/api/staff/" + tempData.sid + "/base",
            data: tempData,
          })
            .then(() => {
              that.$message({
                type: "success",
                message: "更新员工信息成功",
              });
              this.refreashInfo();
            })
            .catch(() => {
              that.$message({
                type: "success",
                message: "更新员工信息失败",
              });
            });
          this.dialogFormVisible = false;
        }
      });
    },
    //序号自增
    indexMethod(index) {
      return (this.listQuery.page - 1) * this.listQuery.limit + index + 1;
    },

    createData() {
      const that = this;
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.temp.sbirth = new Date(this.temp.sbirth);
          console.log(this.temp);
          this.$axios({
            method: "post",
            url: "/api/staff",
            data: this.temp,
          })
            .then((res) => {
              console.log(res.data);
              that.$message({
                type: "success",
                message: "入职新员工成功",
              });
              that.refreashInfo();
            })
            .catch(() => {
              that.$message({
                type: "success",
                message: "入职新员工失败",
              });
            });
          this.dialogFormVisible = false;
        }
      });
    },
  },
};
</script>

<style>
html,
body {
  height: 100%;
}
.filter-container {
  display: flex;
  margin-bottom: 0.5rem;
}
</style>